<template>
    <van-popup
        v-model:show="show"
        position="bottom">
        <van-picker
            ref="areapicker"
            :title="$t('wp-di-qu')"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
        >
        </van-picker>
    </van-popup>
</template>
<script>
import { computed, reactive, toRefs, watch } from 'vue';
import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup';

export default {
    props: {
        memberShow: Boolean
    },
    emits: ['onMemberCancel', 'onMemberConfirm'],
    setup (props, ctx) {
        const { getAllMaintenanceTeamMembers } = useMaintenanceMembersSetup();

        const show = computed(() => {
            return props.memberShow;
        });

        const state = reactive({
            columns: [],
            memberList: []
        });

        // 获取维保负责人
        const getAllMembers = () => {
            getAllMaintenanceTeamMembers().then((data) => {
                state.memberList = data.value.map((item) => {
                    item.label = item.alias ? `${item.account}(${item.alias})` : item.account;
                    return item;
                });
                state.columns = state.memberList.map((item) => {
                    return item.label;
                });
            });
        };

        const onConfirm = (value) => {
            const member = state.memberList.find(item => item.label === value);
            ctx.emit('onMemberConfirm', member);
        };

        const onCancel = () => {
            ctx.emit('onMemberCancel');
        };

        watch(show, (show, prevShow) => {
            if (show) {
                getAllMembers();
            }
        });

        return {
            ...toRefs(state),
            show,
            onConfirm,
            onCancel
        };
    }
};
</script>
